<template>
    <div class="wrapper">
        <top-header title="我要用钱"></top-header>
        <div class="wrapper">
            <bui-cell label="联系人" >
                <input type="text" class="car_info_input" ref="input1" v-model="form.ownername" placeholder="请输入联系人"/>
            </bui-cell>
            <bui-cell label="手机号" >
                <input type="number" class="car_info_input" ref="input2" max-length="11" v-model="form.ownerphone" placeholder="请输入联系方式"/>
            </bui-cell>
            <bui-cell label="身份证" >
                <input type="text" class="car_info_input" ref="input3" v-model="form.code" placeholder="请输入身份证号"/>
            </bui-cell>
            <bui-cell  label="贷款类型">
                <wxc-grid-select
                    :list="items"
                    :single="true"
                    :customStyles="customStyles"
                    @select="params => onSelect('res', params)">
                </wxc-grid-select>
            </bui-cell>
            <div>
                <div class="car_inf_img">
                    <text class="car_info_name">身份证(正面)</text>
                    <image class="car_image" :src="form.picture1" @click="upload(1)"></image>
                </div>
            </div>
            <div>
                <div class="car_inf_img">
                    <text class="car_info_name">身份证(反面)</text>
                    <image class="car_image" :src="form.picture2" @click="upload(2)"></image>
                </div>
            </div>
            <div class="button">
                <wxc-button text="提交申请"
                            @wxcButtonClicked="next" :btnStyle="btnStyle"></wxc-button>
            </div>
        </div>
    </div>
</template>
<script>
import { WxcCheckboxList, WxcButton,wxcGridSelect } from 'weex-ui';
import { buiCell,buiRadio} from 'bui-weex';
import utilFunc from '../../utils/util'
import header from '../../common/header'
export default {
    components: { WxcCheckboxList, WxcButton,buiCell,buiRadio,wxcGridSelect, 'top-header': header, },
    data () {
        return {
            res:'',
            typechecked:'',
            token: '',
            items:[
                {'title':'车抵贷'},
                {'title':'信用贷'},
            ],
            btnStyle: {
                'background-color': '#1E90FF',
            },
            form: {
                'uid': '', // 用户id
                'ownername': '',  // 车主
                'ownerphone': '',  // 车主电话
                'loantype':'',   //贷款类型
                'code':'',
                'picture1': 'bmlocal://assets/acw/cerTop.png',
                'picture2': 'bmlocal://assets/acw/cerBack.png',
            },
            servicePage: {
                "limit": 10,
                "order": "asc",
                "page": 1,
                "sort": "id",
                "uid": '', // 100068
            },
            customStyles: {
                lineSpacing: '24',
                width: '150px',
                height: '60px',
                icon: '',
                // color: '#333333',
                checkedColor: '#ffffff',
                disabledColor: '#eeeeee',
                // borderColor: '#666666',
                checkedBorderColor: '#ffb200',
                backgroundColor: '#ffffff',
                checkedBackgroundColor: '#ffb200'
            }
        }
    },
    created () {
        let user = this.$storage.getSync('UserInfo')
        this.servicePage.uid = user.id
        this.form.ownerphone = user.mobile
        this.form.uid = user.id
    },
    mounted () {
    },
    methods: {
        onSelect (res, { selectIndex, checked, checkedList }) {
            this.blur()
            this.typechecked=checked
                if(checked){
                    this.form.loantype=selectIndex
                }
        },
        // 返回
        back () {
            this.$router.back();
        },
        next () {
            if (!this.validterParam()) {
                return
            }
            const vm = this;
            var userInfo = this.$storage.getSync('UserInfo');

            this.token = userInfo.token;
            this.$fetch({
                method: 'POST',    // 大写
                name: 'service.spendmoney.create', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: this.form,
                header: {
                    'X-TMACW-APP-Token': this.token
                }
            }).then(resData => {
                // 成功回调
                console.log(resData)
                if(resData && resData.errno == 0){
                    this.$notice.toast({ message: '添加成功'})
                    this.back()
                }
            }, error => {
                //
                this.$notice.toast({ message: '添加失败'+error})
                console.log(error)
            })

        },
        // 校验值
        validterParam () {
            if (!this.form['ownername']) {
                this.$notice.toast({ message: '请填写联系人'})
                return false
            } else if (!this.form['ownerphone']) {
                this.$notice.toast({ message: '请填写联系方式'})
                return false
            } else if (!this.form['code']) {
                this.$notice.toast({ message: '请填写身份证号'})
                return false
            } else if (!this.typechecked) {
                this.$notice.toast({ message: '请选择贷款类型'})
                return false
            } else if (this.form['picture1'].indexOf('cerTop.png') != -1) {
                this.$notice.toast({ message: '请上传身份证正面照片'})
                return false
            } else if (this.form['picture2'].indexOf('cerBack.png') != -1) {
                this.$notice.toast({ message: '请上传身份证反面照片'})
                return false
            } else if (!utilFunc.checkIsHasSpecialStr(this.form['ownername'])) {
                this.$notice.toast({ message: '联系人姓名只能是汉字或字母'})
                return false
            } else if (!utilFunc.identifyReg(this.form['code'])) {
                this.$notice.toast({ message: '身份证号格式不正确'})
                return false
            }
            return true
        },

        // 上传图片
        upload (param) {
            this.blur()
            this.$image.pickAndUpload({
                allowCrop: false,             // 是否允许编辑（只有当 maxCount == 1时 此参数才会生效） 默认是false
                params: {},                  // 传递的参数
                header: {}                   // 自定义请求 header
            })
                .then(resData => {
                    console.log(resData)    // [url1, url2...]
                    switch (param) {
                        case 1:
                            this.form.picture1 = resData[0].data.url
                            break
                        case 2:
                            this.form.picture2 = resData[0].data.url
                            break
                    }
                }, error => {
                    console.log(error)
                    this.$notice.toast({ message: '上传失败'})
                })
        },
        // 输入框失去焦点
        blur () {
            if (this.$refs.input1) 
                this.$refs.input1.blur()
            if (this.$refs.input2) 
                this.$refs.input2.blur()
            if (this.$refs.input3) 
                this.$refs.input3.blur()
        }
    }
}
</script>
<style>
    .iconfont {
        font-family: iconfont;
    }
    .wrapper{
        background-color: #fff;
    }
    .content{
        background-color: #fff;
        height: 1334px;
        padding-top: 100px;
    }
    .car_info{
        flex-direction: row;
        margin-top: 10px;
        margin-bottom: 10px;
        align-items: center;
    }
    .car_info_name{
        color: #666;
        width: 200px;
        text-align: center;
    }
    .car_param_val{
        flex: 1;
        flex-direction: row;
    }
    .param_val_text{
        width: 100px;
        margin-left: 20px;
        margin-right: 20px;
        padding: 10px;
        text-align: center;
        border-radius: 10px;
        border-style: solid;
        border-width: 1px;
        border-color: #aaa;
    }
    .car_info_input{
        width: 500px;
        border-style: solid;
        border-width: 1px;
        border-color: #fff;
        border-radius: 5px;
        height: 70px;
        line-height: 70px;
        padding-left: 10px;
        outline-color: #fff;

    }
    .date_div{
        flex-direction: row;
        width: 520px;
        justify-content: space-between;
    }
    .car_info_name{
        color: #666;
        width: 200px;
        text-align: center;
        height: 80px;
        line-height: 80px;
    }
    .car_inf_img{
        flex-direction: row;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .car_image{
        height: 240px;
        width: 460px;
    }
    .button{
        align-items: center;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .cont_car_brand {
        align-items: center;
        flex-direction: row;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .select_box{
        height: 60px;
        line-height: 60px;
        color: #666;
        margin-right: 16px;
        padding-right: 16px;
        padding-left: 16px;
    }
    .border {
        border-style: solid;
        border-width: 1px;
        border-color: #666;
        border-radius: 6px;
    }
    /* 左侧弹窗 */
    .side_pop{
        position: absolute;
        top: 138px;
        background-color: #fff;
        width: 750px;
        height: 1334px;
        padding-top: 100px;
        left: -750px;
    }
    .cell{
        width: 750px;
        border-bottom-color: #eee;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    .list_cont{
        color: #333;
        font-size: 30px;
        height: 100px;
        line-height: 100px;
        margin-left: 20px;
    }

</style>
